<template>
  <el-container class="title-block-select">
    <el-main>
      <el-row :gutter="16">
        <el-col :xs="12" :sm="8" :md="8" :lg="6" :xl="6" v-for="sl in styleList" :key="sl">
          <div
            class="style-item sa-flex sa-row-center"
            :class="sl.src == props.modal.params.src ? 'style-item--active' : ''"
            @click="changeStyle(sl)"
          >
            <sa-image :url="sl.src"></sa-image>
            <div class="title sa-flex sa-row-center">标题栏</div>
            <div class="check-icon sa-flex sa-row-center">
              <el-icon>
                <Check />
              </el-icon>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-main>
    <el-footer class="sa-footer--submit">
      <el-button type="primary" @click="confirm">确 定</el-button>
    </el-footer>
  </el-container>
</template>

<script>
  export default {
    name: 'TitleBlockSelect',
  };
</script>

<script setup>
  import { computed } from 'vue';
  import { checkUrl } from '@/sheep/utils/checkUrlSuffix';

  const emit = defineEmits(['modalCallBack']);
  const props = defineProps(['modal']);

  const activeStyle = computed(() => styleList.find((s) => s.src == props.modal.params.src));
  const styleList = [
    {
      type: 1,
      src: checkUrl('/static/img/shop/decorate/title-1.png'),
      location: 'left',
      skew: 0,
      title: {
        text: '标题栏111',
        textColor: '',
        textFontSize: 14,
        other: [],
      },
      subtitle: {
        text: '标题栏',
        textColor: '',
        textFontSize: 12,
        other: [],
      },
      more: {
        show: 1,
        path: '',
      },
    },
  ];
  function changeStyle(url) {
    props.modal.params.src = url.src;
  }
  // 表单关闭时提交
  async function confirm() {
    emit('modalCallBack', { event: 'confirm', data: activeStyle.value });
  }
</script>

<style lang="scss" scoped>
  .title-block-select {
    .style-item {
      height: 120px;
      border: 1px solid var(--sa-border);
      border-radius: 4px;
      position: relative;
      .sa-image {
        width: 100%;
      }
      .title {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
      .check-icon {
        display: none;
      }
      &--active {
        border-color: var(--el-color-primary);
        .check-icon {
          display: flex;
          width: 16px;
          height: 16px;
          border-radius: 50%;
          background: var(--el-color-primary);
          color: #fff;
          position: absolute;
          top: -7px;
          right: -7px;
          z-index: 10;
          .el-icon {
            font-size: 14px;
          }
        }
      }
    }
  }
</style>
